<template>
	<view class="order-list">
		<!-- 条件显示 -->
		<view class="order-nav">
			<view class="order-nav-item" :class="{active:item.value === navValue}" v-for="item in navs" :key="item.value" @click="turnNav(item.value)">{{item.label}}</view>
		</view>
		<!-- 订单列表 -->
		<view class="list">
			<view class="order-item" v-for="item in list" :key="item.id">
				<view class="order-head">
					<view class="">
						<view class="order-field">订单编号：656565787878</view>
						<view class="order-field">用户：周博 | 1888888888</view>
						<view class="order-field">下单时间：2020-10-10 18:30:09</view>
					</view>
					<view class="order-status">待审核</view>
				</view>
				<view class="order-product">
					<image class="product-image" src="" mode="aspectFit"></image>
					<view class="product-info">
						<view class="product-name">海澜之家服帖扣领短袖休闲衬衫夏季短袖…</view>
						<view class="product-desc">
							<view class="product-desc-item">型号：小号</view>
							<view class="product-desc-item">颜色：白色</view>
						</view>
					</view>
					<view class="">
						<view class="product-price">789.<view class="product-decimal">99</view>
						</view>
						<view class="product-number">x1</view>
					</view>
				</view>
				<view class="order-bottom">
					<view class="" v-if="item.id === toggleId">
						<view class="order-address">
							<view class="order-contact">
								<view class="contact-user">刘姥姥</view>
								<view class="contact-mobile">18888888888</view>
							</view>
							<view class="address-detail">湖南省长沙市岳麓区麓谷街道麓谷企业广场E5栋2单元</view>
						</view>
						<view class="order-footer">
							<view class="order-button">查看物流</view>
							<view class="order-toggle" @click="toggleAddress('')">收起<view class="order-toggle-icon"></view>
							</view>
						</view>
					</view>
					<view class="order-footer footer-collapse" v-else>
						<view class="order-toggle" @click="toggleAddress(item.id)">展开<view class="order-toggle-icon"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navs: [{
					label: '全部',
					value: ''
				}, {
					label: '待审核',
					value: '1'
				}, {
					label: '待发货',
					value: '2'
				}, {
					label: '待收货',
					value: '3'
				}],
				navValue:'',
				list:[{id:'1'}],
				toggleId:''
			};
		},
		methods:{
			toggleAddress(id){
				this.toggleId = id;
			},
			turnNav(value){
				this.navValue = value;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './style.scss';
	$border:1rpx solid #EBEBEB;

	.order-list {}

	.order-nav {
		width: 750rpx;
		background: #FFFFFF;
		@include flex(space-around);

		.order-nav-item {
			position: relative;
			padding: 25rpx 0;
			font-size: 28rpx;
			color: #303133;
			line-height: 40rpx;
			&.active {
				&::after{
					content:'';
					width: 100%;
					height: 4rpx;
					background-color: #FF4544;
					position: absolute;
					left: 0;
					bottom: 0;
				}
			}
		}
	}

	.list {}

	.order-item {
		margin: 24rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.order-head {
			padding: 40rpx 30rpx 24rpx 30rpx;
			@include flex(space-between, flex-start);

			.order-field {
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				font-size: 28rpx;
				color: #303133;
				line-height: 28rpx;
			}

			.order-status {
				font-size: 28rpx;
				color: #FF4544;
				line-height: 40rpx;
			}
		}

		.order-product {
			padding: 30rpx;
			border-top: $border;
			@include flex(space-between, flex-start);

			.product-image {
				width: 158rpx;
				height: 158rpx;
				flex-shrink: 0;
			}

			.product-info {
				width: 290rpx;
				flex-shrink: 0;

				.product-name {
					font-size: 28rpx;
					color: #303133;
					line-height: 38rpx;
				}

				.product-desc {
					margin-top: 20rpx;
					@include flex(flex-start, center);

					.product-desc-item {
						margin-right: 12rpx;
						font-size: 24rpx;
						color: #909399;
						line-height: 33rpx;
					}
				}
			}

			.product-price {
				font-size: 32rpx;
				color: #303133;
				line-height: 38rpx;
				@include flex(center, flex-end);

				&::before {
					content: '¥';
					font-size: 24rpx;
					line-height: 32rpx;
				}

				.product-decimal {
					font-size: 24rpx;
					line-height: 32rpx;
				}
			}

			.product-number {
				text-align: right;
				font-size: 28rpx;
				color: #909399;
				line-height: 40rpx;
			}
		}

		.order-bottom {
			border-top: $border;
			.order-footer {
				padding: 30rpx;
				@include flex(space-between);
				
				.order-toggle {
					@include flex(flex-end);
					font-size: 24rpx;
					color: #303133;
					line-height: 28rpx;
					.order-toggle-icon {
						width: 32rpx;
						height: 32rpx;
						@include bgm('icon-arrow-top.png');
					}
				}
				&.footer-collapse {
					justify-content: flex-end;
					.order-toggle-icon { 
						transform: rotate(180deg);
					}
				}
			}

			.order-address {
				border-bottom: $border;
				padding: 30rpx;
				.font-address {
					font-size: 28rpx;
					color: #303133;
					line-height: 40rpx;
				}
				.order-contact {
					@include flex(flex-start);
					.contact-user {}

					.contact-mobile {
						margin-left: 16rpx;
					}
				}

				.address-detail {
					margin-top: 12rpx;
				}
			}
		}
	}
</style>
